class Register {
    constructor() {
        this.dyNamic();
        // this.posData()
    }
    //1 设置三个状态,用于标识用户名,密码,重复密码是否验证成功
    x = false;
    y = false;
    z = false;
    //绑定事件操作
    dyNamic() {
        //给表单绑定失去焦点操作
        //手机号
        this.$('.inp')[0].addEventListener('blur', this.regular.bind(this))
        //用户名
        this.$('.inp')[1].addEventListener('blur', this.userName.bind(this))
        //密码验证
        this.$('.inp')[2].addEventListener('blur', this.passWord.bind(this))
        //确认密码
        this.$('.inp')[3].addEventListener('blur', this.repassWord.bind(this))
        //给注册按钮绑定点击事件
        this.$('.over').addEventListener('click', this.overD.bind(this))
    }
    //失去焦点操作
    regular() {

        //设置手机号的正则表达式
        let res = /^1[3,5,6,7,8]{1}\d{9}$/
        let val = this.$('.inp')[0].value
        //非空验证
        if (!val) return layer.confirm('手机号不能为空', {
            btn: ['明白', '取消'] //按钮
        })
        // console.log(res.test(val));
        //检测手机号格式是否正确
        if (res.test(val)) {
            layer.tips('手机号正确', '#tel');
            this.$('.telS').style.color = 'green'
            this.$('.telS').innerHTML = '手机号正确'
            localStorage.setItem('nickname', val)
        } else {
            // throw new Error('格式不正确！！！')
            //this.$('.telS1').innerHTML = 'X'
            //this.$('.telS1').style.background = 'red'
            this.$('.telS').style.color = 'red'
            this.$('.telS').innerHTML = '手机号格式不正确'
        }

    }
    //用户名判断
    userName() {
        //  获取表单中的值
        let val = this.$('#code').value;
        //非空验证
        if (!val) return layer.confirm('用户名不能为空', {
            btn: ['明白', '取消'] //按钮
        })
        //console.log(val);
        //  书写正则
        var reg = /^[\w\-\u4E00-\u9FA5]{4,20}$/;
        if (reg.test(val)) {
            this.$('#code').nextElementSibling.style.color = 'green'
            this.$('#code').nextElementSibling.innerHTML = '  √用户名合法';
            this.x = true;
            localStorage.setItem('userName', val)
        } else {
            this.$('#code').nextElementSibling.style.color = 'red'
            this.$('#code').nextElementSibling.innerHTML = '  ×用户名不合法';
            this.x = false;
        }
    }
    //设置密码
    passWord() {

        let passVal = this.$('#psw').value;
        //非空验证
        if (!passVal) return layer.confirm('密码不能为空', {
            btn: ['明白', '取消'] //按钮
        })
        //a 验证密码的长度
        if (passVal.length >= 6 && passVal.length <= 20) {
            // b 验证密码输入的内容
            //记录密码的强度状态
            let a = 0, b = 0, c = 0;
            // 验证是否是有数字
            let reg = /\d+/;
            a = reg.test(passVal) ? 1 : 0;
            //console.log(a);
            // 验证是否有字母
            let reg1 = /[a-zA-Z]+/;
            b = reg1.test(passVal) ? 1 : 0;
            // 验证是否包含特殊字符
            let reg2 = /[^a-zA-Z\d]+/;
            c = reg2.test(passVal) ? 1 : 0;
            // 给出面强度判断
            let str = '';
            switch (a + b + c) {
                case 1:
                    str = 'ruo';
                    break;
                case 2:
                    str = 'zhong';
                    break;
                case 3:
                    str = 'qiang';
                    break;
            }
            // 将密码强度追加到密码框后
            //this.nextElementSibling.innerHTML = str;
            if (str == 'ruo') {
                this.$('.safe em')[0].className = 'ruo'
            }
            if (str == 'zhong') {
                this.$('.safe em')[1].className = 'zhong'
                this.$('.safe em')[2].className = 'li'
                this.$('.safe em')[0].className = 'li'
            }
            if (str == 'qiang') {
                this.$('.safe em')[2].className = 'qiang'
                this.$('.safe em')[1].className = 'li'
                this.$('.safe em')[0].className = 'li'
            }

            localStorage.setItem('userPassWord', passVal)


            this.y = true;

        } else {
            this.$('.pswS').style.color = 'red';
            this.$('.pswS').innerHTML = '密码长度不够';
            this.y = false;
        }
    }
    //确认密码
    repassWord() {
        var pass2Val = this.$('#repsw').value;
        var passVal = this.$('#psw').value;
        if (pass2Val != ' ' && pass2Val == passVal) {
            this.$('.repswS').style.color = 'green';
            this.$('.repswS').innerHTML = '两次密码一致';
            localStorage.setItem('ruserPassWord', pass2Val)
            this.z = true;
        } else {
            this.$('.repswS').style.color = 'red';
            this.$('.repswS').innerHTML = '两次密码不一致';
            this.z = false;
        }
    }
    //提交表单
    overD() {
        if (this.x && this.y && this.z) {
            this.posData()
        }
    }
    //发送请求 
    posData() {
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        let username = localStorage.getItem('userName')
        let password = localStorage.getItem('userPassWord')
        let rpassword = localStorage.getItem('ruserPassWord')
        let nickname = localStorage.getItem('nickname')
        //定义一个变量当参数传入
        let param = `username=${username}&password=${password}&rpassword=${rpassword}&nickname=${nickname}`
        axios.post('http://localhost:8888/users/register', param).then(({ data }) => {
            console.log(data);
            if (data.code == 0) {
                layer.msg('注册失败，用户名已经存在');
            }
            if (data.code == 1) {
                layer.msg('注册成功');
            }
        })

    }
    //获取节点操作
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res
    }
}

new Register()